import React from 'react'
import { Link } from 'react-router-dom'
import { Layout } from 'antd'
import { Menu, Button } from 'antd'
import {
  MailOutlined,
  // DesktopOutlined,
  PieChartOutlined,
} from '@ant-design/icons'

const { Header, Sider, Content } = Layout
const { SubMenu } = Menu

export default class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      color1: {
        color: '#42b983',
      },
      color2: {
        color: '#2c3e50',
      },
      routes: [
        {
          name: '首页',
          key: '/home',
          icon: <PieChartOutlined />,
        },
        {
          name: '用户列表',
          key: '/home/dbFile',
          icon: <PieChartOutlined />,
        },
        {
          name: 'optionList',
          key: '/optionList',
          icon: <PieChartOutlined />,
          children: [
            {
              name: 'option1',
              key: '/optionList/option1',
              icon: <PieChartOutlined />,
            },
          ],
        },
      ],
    }
  }

  componentDidMount() {
    this.changeColor()
  }

  /**
   * 初始 tab 的样式
   */
  changeColor() {
    const pathname = window.location.href
    if (pathname.search('webFile') !== -1) {
      this.wColor()
    }
    if (pathname.search('dbFile') !== -1) {
      this.dColor()
    }
  }

  // 点击第一个tab
  wColor = () => {
    this.setState({
      color1: {
        color: '#42b983',
      },
      color2: {
        color: '#2c3e50',
      },
    })
  }

  // 点击第二个tab
  dColor = () => {
    this.setState({
      color1: {
        color: '#2c3e50',
      },
      color2: {
        color: '#42b983',
      },
    })
  }

  /**
   * 点击菜单
   */
  handleClick = (item, key, keyPath, domEvent) => {
    console.log(item)
    // this.props.history.push(key);
    // 跳转路由
    // this.history.push("/home");
  }

  /**
   * 退出
   */
  logout = () => {
    this.props.history.push('/login')
  }

  // 生成菜单
  initMenu = (item) => {
    if (item.children) {
      return (
        <SubMenu key={item.key} icon={item.icon} title="Navigation One">
          {item.children.map((item) => {
            return this.initMenu(item)
          })}
        </SubMenu>
      )
    } else {
      return (
        <Menu.Item key={item.key} icon={item.icon}>
          <Link to={item.key}>{item.name}</Link>
        </Menu.Item>
      )
    }
  }

  render() {
    //菜单
    const menuList = this.state.routes.map((item) => {
      return this.initMenu(item)
    })
    console.log(menuList)

    return (
      <Layout>
        <Header>
          Header
          <Button onClick={this.logout}>退出</Button>
        </Header>
        <Layout>
          {/* sider */}
          <Sider>
            {/* 菜单 */}
            <Menu
              onClick={this.handleClick}
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              mode="inline"
            >
              {menuList}
              {/* <Menu.Item key="1" icon={<PieChartOutlined />}>
                Option 1
              </Menu.Item>
              <Menu.Item key="2" icon={<DesktopOutlined />}>
                Option 2
              </Menu.Item> */}
              {/* <SubMenu
                key="sub1"
                icon={<MailOutlined />}
                title="Navigation One"
              >
                <Menu.ItemGroup key="g1" title="Item 1">
                  <Menu.Item key="1">Option 1</Menu.Item>
                  <Menu.Item key="2">Option 2</Menu.Item>
                </Menu.ItemGroup>
                <Menu.ItemGroup key="g2" title="Item 2">
                  <Menu.Item key="3">Option 3</Menu.Item>
                  <Menu.Item key="4">Option 4</Menu.Item>
                </Menu.ItemGroup>
              </SubMenu> */}
            </Menu>
          </Sider>
          <Content>
            {/* <h3>
              <Link
                to="/home/webFile"
                style={this.state.color1}
                onClick={() => {
                  this.wColor();
                }}
              >
                URL在线文档预览
              </Link>
              &nbsp;|&nbsp;
              <Link
                to="/home/dbFile"
                style={this.state.color2}
                onClick={() => {
                  this.dColor();
                }}
              >
                数据库文档预览
              </Link>
            </h3> */}
            <div>{this.props.children}</div>
          </Content>
        </Layout>
        {/* <Footer>Footer</Footer> */}
      </Layout>
    )
  }
}
